<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 <link rel="stylesheet" href="../static/css/back/iconfont.css">
    <link rel="stylesheet" href="../static/css/back/xadmin.css">
<!--     <link rel="stylesheet" href="../static/layui/css/layui.css"> -->
    <link rel="stylesheet" href="../static/layui/css/global.css">
    <script type="text/javascript" src="../static/js/jquery-2.1.1.min.js"></script>
        
    <script type="text/javascript" src="../static/js/back/xadmin.js"></script>
    <script src="../static/js/clipboard.min.js"></script>
    <script type="text/javascript" src="../static/js/back/goods-pic-list.js"></script>
    <style>
    .site-doc-icon{
    	width: 100%;
    	overflow: hidden;
    }
.site-doc-icon li {

	width: 222px;
	margin: 2px 5px;
	    border: 1px #f2f2f2 solid;
    padding: 10px;
    float: left;
        height: 222px;
}

.site-doc-icon li .layui-anim {
	width: 150px;
	height: 150px;
	line-height: 150px;
	margin: 0 auto 10px;
	text-align: center;
	background-color: #009688;
	cursor: pointer;
	color: #fff;
	border-radius: 10%;
}
.site-doc-icon .layui-anim>img{
	width: 100% !important;
	height: 100% !important;
}

.edit-pic-ku {
	margin-top: 10px;
	    text-align: right;
}

.edit-pic-ku span {
	margin: 0 10px;
	color: green;
	cursor: pointer;
}
.edit-pic-ku span:nth-child(2) {
	color: red
}
.code{
	text-align: center;
}
.layui-anim {
background-color:#fff !important;
width:100px;
height: 100px;
}
.layui-anim img{
	width: 100%;
	    height: 100%;
}
.pic-info{
    text-align: center;
    line-height: 25px;
    color: #999;
}
/* .pic-info:hover+div{ */
/* 	display: block; */
/* } */
/* .pic-info:hover{ */
/* 	display: none; */
/* } */
.site-doc-icon li:hover>div:nth-child(5) {
	display: block;
}
.site-doc-icon li:hover>div:nth-child(4) {
	display: none;
}
.ckec{
position: absolute;
margin: 3px;
}

.pic-edit{
text-align: center;
    line-height: 27px;
}
.pic-edit span{
	border: 1px #999 solid;
	padding: 3px;
	margin: 2px;
	cursor: pointer;
	color: #999;
}
.copy-info{
    margin-top: -150px;
    z-index: -1;
    height: 1px;
    width: 1px;
    overflow: hidden;
    margin-left: 36px;
    border: none;
}
.copy-info input{
background-color: transparent;
}
</style>
</head>
<body>
<div class="x-nav">
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="iconfont icon-refresh right-top-ref" ></i></a>
    </div>
    <div class="x-body">
      <xblock>
        <button class="layui-btn" id="up-btn-zhu" ><i class="layui-icon"></i>上传图片</button>
        <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><span>全选</span><i class="layui-icon">&#xe605;</i></div>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="moveAll()"><i class="iconfont icon-download"></i>批量转移</button>
        <button class="layui-btn choosepic hide" onclick="chooseOk()">确定</button>
        <span class="x-right" style="line-height:40px">共有数据：0 条</span>
      </xblock>
<div>
<ul class="site-doc-icon site-doc-anim pic-list" >
    <!-- <li >
    	<div class="layui-unselect layui-form-checkbox ckec" lay-skin="primary" data-id="'+v.id+'" ><i class="layui-icon">&#xe605;</i></div>
        <div class="layui-anim" data-anim="layui-anim-scale"><img alt="" src="http://phgdd2bvw.bkt.clouddn.com/ef63020d8d4248d89da7e181ab6d79ca.jpg"></div>   
        <div class="code">炒菜类</div>
        <div class="pic-info ">
	        <div><span>上传时间 : </span><span>2018-99-99</span></div>
	        <div><span>原图尺寸 : </span><span>100*100</span></div>
        </div>
        <div class=" pic-edit hide">
	        <div><span>删除图片</span><span>转移相册</span></div>
	        <div class="copyDivText" data-clipboard-target="#ffo1"><span>复制图片路径</span></div>
        </div>
        <div class="copy-info">
	        <input id="ffo1"  value="http://phgdd2bvw.bkt.clouddn.com/ef63020d8d4248d89da7e181ab6d79ca.jpg"/>
        </div>
    </li> -->
</ul>
</div>
  <div class="layui-form-mid layui-word-aux no-more-data hide">暂无更多数据</div>
<div class="page mypage" > </div> 

<!--演示动画-->
 
<script>
layui.use(['form','layer' ,'layedit','upload'], function(){
    $ = layui.jquery,
 form = layui.form,
 layedit = layui.layedit
 ,upload = layui.upload
  ,layer = layui.layer;
    
  //多图片上传
    uploadListIns2  =  upload.render({
       elem: '#up-btn-zhu',
       url: '../sys/upload/uploadPics',
       auto: true,
       multiple: true,
//            number: 3,//允许上传的数量
//             bindAction: '#upload-btn2',//指向一个按钮触发上传 
//             size:'2048',//尺寸
          accept: "images",//指定允许上传时校验的文件类型
       acceptMime:'image/*',//只显示图片文件
       exts:"jpg|png|gif|jpeg",//允许后缀
       drag:"false",//是否文件拖拽上传
       data:{spid:spid,picTypeId:_tid},//上传接口的额外参数
       choose: function(obj) { //选择文件后的回调函数
//              obj.preview(function(index, file, result){
//                  $('.zhu-pic img').attr("src",result);
//                });
         }
       ,before: function(obj){
       	layer.load();
       }
       ,done: function(res){
       	 layer.closeAll('loading'); //关闭loading
       	  $('.x-green').text('上传成功。');
          $("#goodsPic").val(res.returnObject)
       }
       ,allDone: function(obj){ //当文件全部被提交后，才触发
      	 layer.closeAll('loading'); //关闭loading
      	 layer.msg('上传成功!',{icon:6,time:2000})
      	 getList();
       }
     });
})
    //演示动画
//     $('.site-doc-icon .layui-anim').on('click', function(){
    $("body").on('click', '.site-doc-icon .layui-anim1' , function(){
        var othis = $(this), anim = othis.data('anim');
        //停止循环
        if(othis.hasClass('layui-anim-loop')){
            return othis.removeClass(anim);
        }
        othis.removeClass(anim);
        setTimeout(function(){
            othis.addClass(anim);
        });
        //恢复渐隐
        if(anim === 'layui-anim-fadeout'){
            setTimeout(function(){
                othis.removeClass(anim);
            }, 1300);
        }
    });
    
    var clipboard = new ClipboardJS('.copyDivText');
	    clipboard.on('success', function(e) {
	        console.log("复制成功")
	        layer.msg('复制成功',{icon:6,time:2000})
	    });
	    clipboard.on('error', function(e) {
	    	alert('请选择“拷贝”进行复制!')
	    	layer.msg('复制失败,请选择“拷贝”进行复制!',{icon:5,time:2000})
	    });
	    
	    
</script>
  </body>

</html>